<template>
  <div class="flex a-start l-center flex-wrap pad-l-r15 bor-bottom">
    <div class="item-img-box-title">{{checkboxInfo.title}}</div>
    <span
      v-for="(item,index) in checkboxData"
      class="item-img-box-span mr10"
      :key="index" @click="deleteClick(index)">{{item}}
      <i class="iconfont icon-clean f14 c-999"></i>
    </span>
    <span class="item-img-box-span c-01a4f6"
      v-show="checkboxData.length > 3"
      @click="deleteAllClick()">
      <i class="iconfont icon-clean4 f14 c-01a4f6"></i>清空
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'waybill_list_item',
  props: ['checkboxData', 'checkboxInfo'],
  data() {
    return {

    }
  },
  created() {
    console.log('this.$props.checkboxData', this.$props.checkboxData)
  },
  mounted() {

  },
  methods: {
    // 多选 清空
    deleteAllClick: function() {
      this.checkboxData = []
      this.$emit('return-list', this.checkboxData)
    },
    // 多选 单个删除
    deleteClick: function(index) {
      const that = this
      that.checkboxData.splice(index, 1)
      this.$emit('return-list', this.checkboxData)
    }
  }
}
</script>

<style scoped>
  .item-img-box-title{
    color: #333;
    font-size: .14rem;
    line-height: .24rem;
    height: .24rem;
    float: left;
    overflow: hidden;
    text-align: center;
    padding:.03rem .06rem .03rem .06rem;
    border-radius: .04rem;
    margin: 0.09rem .1rem .09rem 0;
    display: block;
    position: relative;
  }
  .item-img-box-span{
    color: #333;
    font-size: .14rem;
    border: 1px solid #dedede;
    line-height: .24rem;
    height: .24rem;
    float: left;
    overflow: hidden;
    text-align: center;
    padding:.03rem .06rem .03rem .06rem;
    border-radius: .04rem;
    margin: 0.08rem .1rem .08rem 0;
    display: block;
    position: relative;
  }
</style>
